<template>
  <div class="flex flex-col min-h-screen">
    <div class="container mx-auto p-8 flex-1">
      <h1 class="text-4xl font-bold text-center mb-4 relative after:block after:w-24 after:h-1 after:bg-primary-500 after:mx-auto">
        项目动态
      </h1>
      <a-breadcrumb class="text-center mb-4">
        <a-breadcrumb-item>
          <a href="/" class="hover:underline">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/PJ" class="hover:underline">项目动态</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="achievement">{{ achievement.title }}</a-breadcrumb-item>
      </a-breadcrumb>

      <div v-if="achievement" class="bg-white custom-shadow rounded-lg p-6 mb-4">
        <h1 class="text-3xl font-bold mb-2 text-center">{{ achievement.title }}</h1>
        <p class="text-gray-500 text-center mb-2">{{ achievement.time }}</p>
        <p class="text-gray-500 text-center mb-4">{{ achievement.Area }}</p>
        <img :src="achievement.imageUrl" alt="Achievement Image" class="w-full max-w-4xl mx-auto my-4 rounded-md shadow-md" />
        <h1 class="text-2xl font-semibold mb-2">内容讲解</h1>
        <p class="text-lg text-gray-800 mb-4" v-html="dataWithLineBreaks(achievement.descriptionOne)"></p>
        <p class="text-lg text-gray-800" v-html="dataWithLineBreaks(achievement.descriptionTwo)"></p>
      </div>
    </div>
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import FooterComponent from '../Footer.vue';
import { baseURL } from '../apis/homeAPI';

interface Achievement {
  title: string;
  time: string;
  Area: string;
  imageUrl: string | null;
  descriptionOne: string;
  descriptionTwo: string;
}

const route = useRoute();
const achievement = ref<Achievement | null>(null);

const fetchAchievement = async () => {
  const id = route.params.id;

  try {
    const response = await axios.get(`${baseURL}/api/project-dynamics/${id}?populate=*`);
    const data = response.data.data.attributes;

    const imageUrl = data.image?.data?.attributes?.url;

    achievement.value = {
      title: data.title,
      time: data.time,
      Area: data.Area,
      imageUrl: imageUrl ? `${baseURL}${imageUrl}` : null,
      descriptionOne: data.descriptionOne,
      descriptionTwo: data.descriptionTwo,
    };
  } catch (error) {
    console.error('Error fetching achievement:', error);
  }
};

const dataWithLineBreaks = (data: string) => {
  if (typeof data === 'string') {
    return data.replace(/\n/g, '<br>');
  }
  return '';
};

onMounted(() => {
  fetchAchievement();
});
</script>

<style scoped>
.custom-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
